{% load article_tags %}
<div>
    <ul class="layui-nav layui-containerv layui-bg-cyan" style="background-color: #409EFF" lay-filter="nav-select">
        <a class="logo" href="{% url 'article-index-view' %}" title="首页-变饼档" style="color: #ffffff"
           onclick="changeNav()">
            <img src="/static/img/bianbingdang.png"
                 style="width:48px;margin-top: 5px;margin-left: 5px" alt="变饼档">
        </a>
        <li class="layui-nav-item" id="nva-index">
            <a href="/" style="color: #ffffff">首页</a>
        </li>
        <li class="layui-nav-item" id="nva-all">
            <a href="{% url 'article-category' 'all' %}" style="color: #ffffff">所有文章</a>
        </li>
        {% for nav in ''|set_navs %}
            <li class="layui-nav-item layui-hide-xs">
                <a href="{{ nav.link }}" target="_blank" style="color: #ffffff">{{ nav.name }}</a>
            </li>
        {% endfor %}
        {% if not user.is_authenticated %}
            <li class="layui-nav-item layui-layout-right" style="right: 70px">
                <a class="" href="{% url 'user-login' 'login' %}">登录/注册</a>
            </li>
            <li class="layui-nav-item layui-layout-right" style="right: 10px">
                <a href="{% url 'user-login' 'login_qq' %}" title="QQ登录">
                    <i class="layui-icon layui-icon-login-qq" style="font-size: 30px; color: #1E9FFF;"></i>
                </a>
            </li>
        {% else %}
            <li class="layui-nav-item layui-layout-right" style="right: 10px">
                <a href="#">用户：{{ user.nick_name }}</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{% url 'article-author-view' user.username %} ">个人中心</a>
                    </dd>
                    <dd>
                        <a href="{% url 'user-login' 'logout' %}">朕走了</a>
                    </dd>
                </dl>
            </li>
        {% endif %}
    </ul>
</div>


<script>
  layui.use(['element'], function () {
    const element = layui.element
    element.init()
    let nvaEleId = null
    element.on('nav(nav-select)', function (elem) {
      nvaEleId = $(elem[0]).parent().attr('id')
      sessionStorage.setItem('nvaEleId', nvaEleId)
    })

    if (!nvaEleId) {
      nvaEleId = sessionStorage.getItem('nvaEleId')
      $('#' + nvaEleId).addClass('layui-this')
    }
  })

  function changeNav () {
    sessionStorage.setItem('nvaEleId', 'nva-index')
  }
</script>